<template>
  <!-- 旅游景点详情 -->
  <div class="salesPage">
    <HeaderBox></HeaderBox>
    <div class="warpper_box">
      <div class="crumbs">
        <span @click="$router.push('/')">首页</span> >
        <span>详情页</span>
      </div>
      <div class="top_bar">
        <div class="l">
          <!-- 轮播图 -->
          <div class="sales-photo">
            <Swiper :swiperData="swiperData" isFade="slide"></Swiper>
          </div>
          <!-- 日历 -->
          <div class="calendar">
            <Calendar @select="selectDay"></Calendar>
          </div>
        </div>
        <div class="r">
          <div class="title_bar">
            <h3>
              <span>自营</span>
              三亚亚龙湾热带天堂森林公园+沙滩经典一日游(可选过江龙索桥/网红玻璃桥打卡)
            </h3>
            <div class="tip">
              <span>电影拍照地</span>
              <span>三亚地标景点</span>
              <span>俯瞰三亚全海景</span>
            </div>
          </div>
          <!-- 价格 -->
          <div class="price">
            <p><span>￥</span>145 ~ 165</p>
            <i>价格说明</i>
            <span>已售63522</span>
          </div>
          <!-- 优惠信息 -->
          <div class="discounts">
            <div class="t">优惠信息</div>
            <div class="ydxzz">
              <div class="tit">预定须知</div>
              <div class="box">
                最晚23:00前可订明日，本商品支付完成即可顺利出行， 无需等待确认
              </div>
            </div>
          </div>
          <!-- 项目选择 -->
          <div class="project_select">
            <div class="item">
              <div class="l">套餐类型</div>
              <div class="r">
                <span class="changeHand">森林公园+沙滩大团</span>
                <span class="changeHand">精选小团</span>
              </div>
            </div>
            <div class="item">
              <div class="l">玩乐项目</div>
              <div class="r">
                <span class="changeHand">不含项目</span>
                <span class="changeHand">过江龙索桥</span>
              </div>
            </div>
            <div class="item">
              <div class="l">出团人数</div>
              <div class="r">
                <span class="changeHand">纯玩大巴团定点接送</span>
                <span class="changeHand">上门接送(限区域)</span>
              </div>
            </div>
          </div>
          <!-- 价格结算 -->
          <div class="price_close">
            <div class="l">--</div>
            <div class="r changeHand">立即购买</div>
          </div>
        </div>
      </div>

      <div class="explaimText">
        <!-- 导航条 -->
        <div class="nav_bar">
          <ul>
            <li class="active">图文介绍</li>
            <li>费用说明</li>
            <li>购买须知</li>
            <li>用户点评</li>
          </ul>
        </div>
        <!-- 图文介绍 -->
        <div class="imageText">
          <h2><span></span> 图文介绍</h2>
          <h5>图文详情</h5>
          <div class="bigImg">
            <img
              src="https://sales.mafengwo.net/mfs/s16/M00/0A/9D/CoUBUl6b7tWAQS70AAESc3WaB3k26.jpeg?imageView2%2F2%2Fw%2F1000%2Fq%2F90"
              alt=""
            />
          </div>
        </div>
        <!-- 费用说明 -->
        <div class="expense">
          <h2><span></span> 费用说明</h2>
          <h5>费用包含</h5>
          <div class="expense_text">
            <div class="item">
              <div class="l">当地交通</div>
              <div class="r">根据参团人数调派车型,保证一人一正座</div>
            </div>
            <div class="item">
              <div class="l">餐食</div>
              <div class="r">行程中所列餐食,本行程不含餐,全程餐费自理</div>
            </div>
            <div class="item">
              <div class="l">景点门票</div>
              <div class="r">行程中所列景点首道大门票,景区内游览车</div>
            </div>
            <div class="item">
              <div class="l">司导服务</div>
              <div class="r">当地中文司机和导游</div>
            </div>
          </div>
          <!-- 费用不含 -->
          <div class="containCosts">
            <h5>费用不含</h5>
            <div class="containCosts_text">
              <ul>
                <li>
                  因交通延阻、罢工、天气、飞机、机器故障、航班取消或更改时间等不可抗力原因所导致的额外费用
                </li>

                <li>一切个人消费及费用包含中未提及的任何费用</li>
              </ul>
            </div>
          </div>
          <!-- 儿童政策 -->
          <div class="children_policy">
            <h5>儿童政策</h5>
            <div class="policy_text">
              <ul>
                <li>身高0-70厘米（不含），免费</li>
                <li>
                  身高70-120厘米（不含），购买儿童优惠人群座位费，到景区免门票游览车
                </li>
                <li>
                  注：
                  1.身高不足1.2M儿童在有购票成人陪同下可以免费体验玻璃栈道，身高到达1.2米儿童按照成人价格98元/人付费体验玻璃栈道
                  2.亚龙湾沙滩不需要门票，如抵达后需体验项目需自费
                  √.到达70岁人群参团需购买50元座位费，至景区再凭身份证自费购买景区游览车（50元）
                </li>
              </ul>
            </div>
          </div>
          <!-- 自费项目 -->
          <div class="chargedItem">
            <h5>自费项目</h5>
            <div class="tableItem">
              <div class="tT">
                <span>活动</span>
                <span>说明</span>
                <span>停留时间</span>
                <span>参考价格</span>
              </div>
              <div class="tb">
                <div class="item">
                  <span>亚龙湾热带天堂森林公园</span>
                  <span>海景玻璃栈桥</span>
                  <span>营业时间内</span>
                  <span>98元/人</span>
                </div>
                <div class="item">
                  <span>亚龙湾热带天堂森林公园</span>
                  <span>过江龙索桥</span>
                  <span>单程</span>
                  <span>20元/人</span>
                </div>
              </div>
            </div>
            <div class="prompt">
              自费项目不强制购买，客人应本着"自愿自费"的原则酌情参加。
            </div>
          </div>
        </div>
        <!-- 购买须知 -->
        <div class="buy">
          <h2><span></span>购买须知</h2>
          <h5>服务信息</h5>
          <div class="box_text">
            <ul>
              <li>本商品支付成功后立即确认，无需等待</li>
              <li>
                本商品提供出团通知书/确认单，商家最晚在出行日期前1天发送，如未收到请及时与商家联系
              </li>
            </ul>
          </div>
          <div class="cancel">
            <h5>取消政策</h5>
            <div class="cancel_text">
              <ul>
                <li>用户违约规则</li>
                <li>预定成功后,因用户原因取消订单的,费用扣除标准如下:</li>
                <li>
                  使用日期前1天23:50之前（含）取消，扣除用户订单金额0元作为商家损失费
                </li>
                <li>
                  使用日期前1天23:50之后取消，扣除用户订单金额50元/份作为商家损失费
                </li>
                <li>
                  如按上述约定比例扣除的必要的费用低于实际发生的费用，用户按照实际发生的费用支付，但不可超出订单总金额。
                </li>
                <li>时差说明</li>
                <li>上述时间均为商品当地时间</li>
                <li>商家违约规则</li>
                <li>
                  预订成功后，因商家原因取消订单的，除全额退款外，还应向用户支付违约金（不可抗力除外），标准如下：
                </li>
                <li>
                  使用日期前1天23:50之前（含）取消，除全额退款外，还应向用户支付订单金额的0元作为用户损失费
                </li>
                <li>
                  使用日期前1天23:50之后取消，除全额退款外，还应向用户支付订单金额的50元/份作为用户损失费
                  如按上述约定比例支付的违约金不足以赔偿用户的实际损失，商家应当按实际损失对用户予以赔偿。
                  时差说明
                </li>
                <li>上述时间均为商品当地时间</li>
              </ul>
            </div>
          </div>
          <div class="useExplain">
            <h5>使用说明</h5>
            <ol>
              <li>
                出游前一天20:00-22:00前导游会与您联系告知具体乘车时间及地点（如在22:00后下单导游将会在下单成功1小时内与您取得联系）
              </li>
              <li>出游当日凭预定信息及电话号码到指定接站地点乘车</li>
            </ol>
          </div>
          <div class="notice">
            <h5>注意事项</h5>
            <ol>
              <li>
                因产品为散客拼团（即由每组同行8人（不含）以下的散客拼团），如同行为8-15人，需另加收10元/人导游服务费，16人及以上请另询客服。该费用请出行当天现付给导游；
              </li>
              <li>60岁以上老人参团需有年轻人陪同，否则将无法接待，请谅解；</li>
              <li>该一日游外宾、孕妇和80岁（含）以上老人无法接待，请谅解。</li>
            </ol>
            <div class="board">
              重要公告
              <p>
                尊敬的游客，海南省旅游和文化广电体育厅《关于严格执行跨省旅游经营活动管理“熔断”机制的紧急通知》，从即日起，游客个人通信大数据行程卡中如出现星（*）号标识（有到达中高风险地区），景区将无法接待谢绝入园，请您密切关注并及时了解出发地及目的地疫情动态，以免对您的行程造成影响，谢谢。
              </p>
            </div>
          </div>
          <div class="clustering">
            <h5>成团说明</h5>
            <ol>
              <li>
                本商品最少成团人数为10人，如未达到最少成团人数将在出发前1天通知不成团，如不成团将全额退还您支付的费用。未通知的视为成团
              </li>
              <li>每团最多人数为45人（含占座儿童）</li>
            </ol>
          </div>
          <!-- 购物须知 -->
          <div class="shopping">
            <h5>购物须知</h5>
            <span
              >本商品全程不含购物店行程（DFS，老佛爷等全球知名百货、景区景点及用户自身要求组织等非平台商家组织的购物除外）</span
            >
          </div>
          <!-- 重要提示 -->
          <div class="significance">
            <h5>重要提示</h5>
            <ol>
              <li>
                马蜂窝尊重并保护用户隐私，用户信息只会用于协助用户预订旅游商品；
              </li>
              <li>
                出行前，请您确保您自身的身体状况适合参加行程，您应将自身健康情况如实告知旅行社；
                并请尊重当地的饮食习惯、习俗禁忌、宗教礼仪，
                遵守当地法律法规等；可仔细阅读 《旅游安全手册》，
                普及自身旅游安全知识，遵守旅游文明公约，使旅程顺遂；
              </li>
              <li>
                为了您人身、财产的安全，请您避免在公开场合暴露贵重物品及大量现金；
              </li>
              <li>
                您所预订的商品可能包含高危项目（如游泳、漂流、潜水、滑雪等），参与前请根据自身条件，
                并充分参考当地相关部门及其它专业机构的相关公告和建议后出行，出行前请仔细阅读
                《安全防护指南》 ；
              </li>
              <li>
                建议您自己购买旅游意外保险及其他保险，可保障您在境内旅行期间自身生命、
                身体、财产或者相关利益的短期旅游意外伤害保险及紧急救援保险；
              </li>
              <li>请您注意与旅行社签订旅游合同；</li>
              <li>
                预订订单，需要在支付时限内支付全款，超出时限的支付将被视为无效支付，
                系统将在1个工作日内将款项退回原支付的账号里，购买成功会收到确认邮件及短信。
              </li>
            </ol>
          </div>
          <!-- 产品信息 -->
          <div class="product">
            <h5>产品服务信息</h5>
            <span>该旅游产品由 三亚金坤国际旅行社有限公司 提供</span>
          </div>
        </div>
        <!-- 用户点评 -->
        <div class="userremark">
          <h2><span></span>用户点评</h2>
          <div class="ingredient">
            <div class="item">
              <span>行程安排</span>
              <div class="progress">
                <div class="select" :style="`width:${(4.5 / 5) * 100}%;`"></div>
              </div>
            </div>
            <div class="item">
              <span>司导服务</span>
              <div class="progress">
                <div class="select" :style="`width:${(4.5 / 5) * 100}%;`"></div>
              </div>
            </div>
            <div class="item">
              <span>产品体检</span>
              <div class="progress">
                <div class="select" :style="`width:${(4.6 / 5) * 100}%;`"></div>
              </div>
            </div>
            <div class="item">
              <span>客服服务</span>
              <div class="progress">
                <div class="select" :style="`width:${(4.7 / 5) * 100}%;`"></div>
              </div>
            </div>
          </div>
          <div class="identification">
            <ul>
              <li>森林公园</li>
              <li>沙滩</li>
              <li>导游热情</li>
              <li>没有消费</li>
              <li>服务很好</li>
              <li>车大</li>
              <li>自助餐还可以</li>
              <li>人少</li>
              <li>景色美</li>
              <li>电话提醒</li>
              <li>耐心回复问题</li>
              <li>值得一去</li>
              <li>格式实惠</li>
            </ul>
          </div>
          <div class="remarkTitle">
            <div class="item active">全部(50)</div>
            <div class="item">推荐(48)</div>
            <div class="item">一般(2)</div>
            <div class="item">不推荐(0)</div>
          </div>
          <div class="mian_remark">
            <!-- 没有数据 -->
            <div class="no_data">
              <el-empty description="暂无点评,赶快来抢沙发吧!!!!"></el-empty>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "../components/Swiper.vue";
import HeaderBox from "../components/HeaderBox.vue";
export default {
  props: {},
  components: { Swiper, HeaderBox },
  data() {
    return {
      percentage: 20, // 评分数
      customColor: "#409eff",
      swiperData: [
        {
          imgUrl:
            "https://sales.mafengwo.net/mfs/s15/M00/4E/E8/CoUBGV3g6RWABhvtAEqroAHPYPY025.gif?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100",
        },
        {
          imgUrl:
            "https://sales.mafengwo.net/mfs/s9/M00/68/C2/wKgBs1gUxdiAXF4nAAOOJBBf-mA92.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100",
        },
        {
          imgUrl:
            "https://sales.mafengwo.net/mfs/s9/M00/BB/00/wKgBs1gVvNOARoTlAANQRaJY3nU27.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100",
        },
        {
          imgUrl:
            "https://sales.mafengwo.net/mfs/s14/M00/A1/38/wKgE2l0TIOGAV8B0AAEtaHEb7ws27.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100",
        },
        {
          imgUrl:
            "https://sales.mafengwo.net/mfs/s7/M00/70/89/wKgB6lRa5lmANJHhAADjb0lNUck46.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100",
        },
        {
          imgUrl:
            "https://sales.mafengwo.net/mfs/s15/M00/4E/E9/CoUBGV3g6RWAWG4EAAFOv1aLMq416.jpeg?imageMogr2%2Fthumbnail%2F%21440x260r%2Fgravity%2FCenter%2Fcrop%2F%21440x260%2Fquality%2F100",
        },
      ],
      calendar: "", //日历数据
    };
  },
  methods: {
    selectDay(day) {
      //   console.log(day);
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>
<style lang="scss" scoped>
.warpper_box {
  .crumbs {
    padding-left: 60px;
    display: flex;
    align-items: center;
  }
  .top_bar {
    display: flex;
    justify-content: space-around;
    // align-items: center;
    .l {
      width: 440px;
      .sales-photo {
        margin-top: 10px;
        width: 440px;
        height: 260px;
      }
    }
    .r {
      width: 540px;
      .title_bar {
        h3 {
          font-size: 20px;
          font-weight: 400;
          span {
            padding: 2px 6px;
            background-color: #ffdb26;
          }
        }
        .tip {
          display: flex;
          align-items: center;
          margin-top: 10px;
          span {
            color: #ff6f00;
            font-size: 12px;
            padding: 0px 6px;
            border: 1px dashed #ff6f00;
            margin-right: 10px;
          }
        }
      }
      .price {
        padding: 15px 10px;
        background-color: rgba(189, 187, 187, 0.3);
        border-radius: 2px;
        display: flex;
        align-items: flex-end;
        margin-top: 10px;
        p {
          color: #ff6f00;
          font-size: 40px;
          font-weight: 900;
          span {
            font-size: 18px;
          }
        }
        i {
          padding-bottom: 10px;
          margin-left: 10px;

          font-size: 12px;
          color: #ff9d00;
          cursor: pointer;
        }
        & > span {
          padding-bottom: 10px;
          margin-left: 20px;
          color: #ccc;
          font-size: 12px;
        }
      }
      //   优惠信息
      .discounts {
        // height: 180px;
        padding: 60px 0 30px;
        border-bottom: 1px dashed #ccc;
        .t {
          font-size: 16px;
          margin-bottom: 40px;
          color: #ccc;
        }
        .ydxzz {
          display: flex;
          align-items: center;
          .tit {
            font-size: 16px;
            color: #ccc;
            margin-right: 30px;
          }
          .box {
            color: #333;
          }
        }
      }
      //   项目选择
      .project_select {
        margin-top: 30px;
        .item {
          margin: 26px 0;
          display: flex;
          align-items: center;
          .l {
            font-size: 16px;
            width: 80px;
            color: #ccc;
            margin-right: 10px;
          }
          .r {
            span {
              border: 1px solid #ddd;
              padding: 2px 8px;
              font-size: 16px;
            }
          }
        }
      }
      //  价格结算
      .price_close {
        background-color: rgba(189, 187, 187, 0.3);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 30px;
        height: 60px;
        .l {
          font-size: 30px;
          color: #ff6f00;
          font-weight: 900;
        }
        .r {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 230px;
          color: #fff;
          background-color: #ff9d00;
          font-size: 30px;
          height: 100%;
        }
      }
    }
  }
  //   导航条
  .explaimText {
    margin-top: 40px;
    width: 700px;
    padding-left: 60px;
    padding-bottom: 120px;
    border-bottom: 1px dashed #ccc;
    .nav_bar {
      ul {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ddd;
        li {
          width: 80px;
          text-align: center;
          font-size: 16px;
          height: 40px;

          &.active {
            color: #ff6f00;
            border-bottom: 3px solid #ff6f00;
          }
        }
      }
    }
    .imageText,
    .buy,
    .userremark .clustering,
    .shopping,
    .expense {
      margin-top: 30px;

      h2 {
        font-size: 26px;
        display: flex;
        align-items: center;
        font-weight: 400;
        margin-bottom: 10px;
        span {
          width: 2px;
          height: 20px;
          display: block;
          margin-right: 10px;
          border: 3px solid #ff6f00;
          border-radius: 10px;
        }
      }
      .bigImg {
        margin-top: 20px;
      }
    }
    .expense {
      .expense_text {
        border-bottom: 1px dashed #ddd;
        padding-bottom: 30px;
        .item {
          margin: 10px;
          display: flex;
          align-items: center;
          .l {
            width: 120px;
            font-size: 14px;
          }
          .r {
            font-size: 14px;
          }
        }
      }
      .containCosts {
        padding: 30px 0;
        border-bottom: 1px dashed #ccc;
        h5 {
          font-size: 18px;
        }
        .containCosts_text {
          margin-top: 10px;
          ul {
            padding-left: 20px;
            li {
              list-style: square;
            }
          }
        }
      }
      .children_policy {
        padding: 30px 0;
        border-bottom: 1px dashed #ccc;
        h5 {
          font-size: 18px;
        }
        .policy_text {
          margin-top: 10px;
          ul {
            padding-left: 20px;
            li {
              list-style: square;
            }
          }
        }
      }
      //  费用项目
      .chargedItem {
        padding: 30px 0;
        border-bottom: 1px dashed #ccc;
        h5 {
          font-size: 18px;
        }
        .tableItem {
          border: 1px solid #ddd;
          margin-top: 10px;

          .tT {
            padding: 0 30px;
            height: 40px;
            align-items: center;
            display: flex;
            background-color: rgba(216, 216, 216, 0.3);
            span {
              flex: 1;
            }
          }
          .tb {
            .item {
              padding: 0 30px;
              height: 60px;
              display: flex;
              align-items: center;
              span {
                flex: 1;
                font-size: 12px;
              }
            }
          }
        }
        .prompt {
          padding: 10px 0 10px 20px;
          margin: 20px 0;
          background-color: rgba($color: #ff8a30, $alpha: 0.2);
        }
      }
    }
    //   购买须知
    .buy {
      border-bottom: 1px dashed #ddd;
      padding: 30px 0;
      .box_text {
        padding-bottom: 30px;
        border-bottom: 1px dashed #ddd;
        ul {
          li {
            height: 30px;
          }
        }
      }
      .cancel {
        border-bottom: 1px dashed #ddd;
        padding: 30px 0;
        h5 {
          margin: 20px 0;
        }
        .cancel_text {
          border: 1px dashed #ddd;
          background-color: #fff8b7;
          padding: 6px 10px;
          ul {
            li {
              margin: 6px 0;
              font-size: 12px;
            }
          }
        }
      }
      // 使用说明
      .useExplain {
        padding: 30px 0;
        border-bottom: 1px dashed #ddd;
        ol {
          margin-top: 10px;
          padding-left: 20px;
        }
      }
      .notice {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 30px;
        h5 {
          margin: 20px 0;
        }
        .board {
          margin-top: 10px;
          color: red;
          margin-left: -15px;
        }
      }
      .clustering,
      .significance,
      .product,
      .shopping {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 30px;
        h5 {
          margin: 10px 0;
        }
      }
    }
    //   用户点评
    .userremark {
      .ingredient {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 30px;
        .item {
          display: flex;
          align-items: center;
          width: 50%;
          padding: 0 30px;
          margin-bottom: 30px;
          .progress {
            flex: 1;
            position: relative;
            background-color: #ccc;
            height: 8px;
            border-radius: 20px;
            margin-left: 20px;

            .select {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              border-radius: 20px;
              background-color: #ff6f00;
            }
            // display: inline-block;
          }
        }
      }
      .identification {
        ul {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          li {
            margin: 8px 6px;
            padding: 4px 6px;
            border: 1px solid #ddd;
          }
        }
      }
      .remarkTitle {
        display: flex;
        margin: 20px 0;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
        .item {
          padding: 2px 16px;
          background-color: rgba($color: #fffdf1, $alpha: 0.8);
          font-size: 14px;
          margin: 0 20px;
          border: 1px solid #ccc;
          border-radius: 20px;
          position: relative;
          &.active {
            color: #fff;
            background-color: #ff9d00;
            border: none;
            &::before {
              content: "";
              position: absolute;
              left: 50%;
              bottom: -4px;
              width: 8px;
              height: 8px;
              background-color: #ff9d00;
              transform: translateX(-50%) rotate(45deg);
            }
          }
        }
      }
      .mian_remark {
        .no_data {
          min-height: 200px;
          color: #ccc;
          font-size: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
